<template>
  <view class="">
    <uni-popup ref="certification" type="center" :isMaskClick="false">
      <view class="card-box">
        <view class="flex flex-x-end">
          <view
            @click="close"
            class="iconfont icon-cuo fs-40 color-999999"
            style="font-size: 40rpx"
          ></view>
        </view>
        <view class="flex flex-y flex-x-y">
          <image
            src="../../static/images/rentou.png"
            style="width: 196rpx; height: 196rpx"
            mode=""
          ></image>
        </view>
        <view class="fs-40 color-333333 bold" style="margin-top: 16rpx"
          >需完成身份认证</view
        >
        <view style="margin-top: 6rpx" class="color-999999 fs-26">
          为保障您的账号信息安全，需进行身份认证
        </view>

        <view class="input-box">
          <view class="input-title fs-30">姓名</view>
          <input type="text" v-model="card_name" class="fs-30" placeholder="请输入真实姓名" />
        </view>
        <view class="input-box">
          <view class="input-title fs-30">身份证号</view>
          <input
            :maxlength="18"
            class="fs-30"
            type="idcard"
            v-model="card_id"
            placeholder="请输入身份证号"
          />
        </view>
        <view class="input-box">
		  <view @click="sendRegistCode" class="color-blue fs-30">{{ time }}</view>
          <input
            v-model="code"
            type="number"
            maxlength="10"
            class="flex-1 color-333333 fs-30"
			placeholder="请输入验证码"
            placeholder-class="color-999999 font"
          />
          
        </view>
        <view
          @tap.stop="to_check"
          class="input-box flex-x-center"
          style="background-color: #ef4034; color: #ffffff"
        >
          <view class="fs-30">开始验证</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card_name: "",
      card_id: "",
      phoneNum: "",
      code:"",
      time: "获取验证码",
      currentTime: 60,
    };
  },
  mounted() {
    if (this.user_info && this.user_info.phone) {
      this.phoneNum = this.user_info.phone;
    }
  },
  methods: {
    //提交身份信息
    to_check() {
      // if (String(this.card_phone).trim() == '' || String(this.card_phone).length != 11) {
      // 	this.showToast('请正确填写号码');
      // 	return;
      // }
      // this.close();
      if (this.card_name.trim() == "") {
        this.showToast("请填写姓名");
        return;
      }
      if (this.card_id.trim() == "" || String(this.card_id).length != 18) {
        this.showToast("请正确填写身份证号");
        return;
      }
      if (this.code.trim() == "" || String(this.code).length != 6) {
        this.showToast("请正确填写验证码");
        return;
      }
      this.request({
        url: "/user/realName",
        method: "POST",
        data: {
          idCard: this.card_id,
          fullName: this.card_name,
          code: this.code,
        },
        loading: true,
      }).then((res) => {
        if (res.status == 200) {
          this.showToast("认证成功");
          this.$store.dispatch("refresh_user");
          this.close();
        }
      });
    },
    //获取验证码
    sendRegistCode(e) {
      if (this.time != "获取验证码") {
        this.showToast("请稍等");
        return;
      }

      this.less(() => {
        let that = this;
        console.log(that.phoneNum, "111");
        var reg = /^1[3456789]\d{9}$/; //11位手机号码正则
        if (that.phoneNum.length == 0) {
          uni.showToast({
            title: "请输入手机号",
            icon: "none",
          });
        } else if (reg.test(that.phoneNum) == true) {
        //   let currentTime = that.currentTime;
          let interval;
          this.request({
            url: "/user/getUpdateCode",
            data: {
              phone: this.phoneNum,
              uuid: this.uuid,
              code: this.imgcode,
            },
            loading: true,
          }).then((res) => {
            if (res.status == 200) {
              this.showToast("验证码已发送", 3000);
              that.time = that.currentTime + "s后重新获取";
              that.disabled = true;
              interval = setInterval(function () {
                that.time = that.currentTime - 1 + "s后重新获取";
                that.currentTime--;
                if (that.currentTime <= 0) {
                  clearInterval(interval);
                  (that.time = "获取验证码"),
                    (that.currentTime = 60),
                    (that.disabled = false);
                }
              }, 1000);
              // this.to_check()
            }
          });
        } else {
          uni.showToast({
            title: "请输入正确的手机号",
            icon: "none",
          });
        }
      });
    },
    open() {
      this.$refs.certification.open();
    },
    close() {
      this.$refs.certification.close();
      this.$emit('close')
    },
  },
};
</script>

<style lang="scss">
.color-323232 {
  color: #323232;
}

.buy-btn {
  width: 710rpx;
  border-radius: 50rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(224deg, #f6a266 0%, #f02727 100%);
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
}

.card-box {
  width: 606rpx;
  padding: 50rpx 40rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
  /* background: #FFFFFF url(../../static/images/rentou-bg.png) left top / 100% auto no-repeat; */
}

.input-box {
  width: 100%;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  padding: 0 26rpx;
  display: flex;
  align-items: center;
  background-color: #eeeeee;
  color: #666666;
  margin-top: 26rpx;
}

.input-box input {
  flex: 1;
  color: #666;
  height: 100%;
  text-align: right;
}

.loginModule {
  display: flex;
  /* border-bottom: 2rpx solid #FFFFFF; */
  align-items: center;
  /* padding-bottom: 18rpx; */
  margin-top: 24rpx;
  /* justify-content: space-between; */
  height: 88rpx;
  box-sizing: border-box;
}

.more {
  font-size: 28rpx;
  font-weight: 400;
  text-align: center;
  color: #191a1b;
  line-height: 42rpx;
  background-color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 10rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
  /* min-width: 180rpx; */
  text-align: center;
}
</style>